<template>
	<div class="userData">	
		<header class="userData-header">
             <router-view></router-view> 
             <router-link to="/user" tag="i">
             </router-link> 
            <span>个人资料</span>
        </header>
        <div class="userData-content">
            <div class="userData-content-hI">
                <span>头像</span>
                <span></span>
                <span></span>
            </div>
            <div class="userData-content-nN">
                <span>昵称</span>
                <span></span>
            </div>
            <div class="userData-content-s">
                <span>性别</span>
                <span></span>
            </div>
            <div class="userData-content-bD">
                <span>出生日期</span>
                <span></span>
            </div>
            <div class="userData-content-mC">
                <span>我的会员卡</span>
                <span></span>
            </div>
        </div>
        <div class="userData-other">
            <div class="userData-other-mC">
                <span>修改密码</span>
                <span></span>
            </div>
            <div class="userData-other-aM">
                <span>收货地址管理</span>
                <span></span>
            </div>
        </div>
	</div>
</template>

<script>
export default{

}
</script>

<style>
@import "../../static/css/base.css";
.userData{
    width: 100%;
	height: 100vh;
    z-index: 9999;
    position:fixed;

}
.userData-header{
    width:100%;
    height: 0.7rem;
    font-size:.28rem;
    display: flex;
    align-items:center;
    border-bottom:9px solid rgb(248,248,248);
}

.userData-header i{
    width: .5rem;
    height: .7rem;
    background: url(../../static/img5/icon-arrow1.png) no-repeat .1rem center;
    background-size: 50%;
}

.userData-header span{
    padding-left: 30%;
}
.userData-content{
    width:100%;
    padding:0 0 0 .2rem;
    border-bottom: 9px solid rgb(248,248,248);
}
/* 头像 */
.userData-content-hI{
    width: 100%;
    height: 1.1rem;
    font-size:.23rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(200,200,200);
}
.userData-content-hI span:first-of-type{
    margin-right: 65%;
}
.userData-content-hI span:nth-of-type(2){
    width:.9rem;
    height:.9rem;
    background: url(../../static/img5/headImage.jpg) no-repeat right center;
    background-size: 80%;
}
.userData-content-hI span:last-of-type{
    width:.4rem;
    height:1.1rem;
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}
/*  昵称 */
.userData-content-nN,
.userData-content-s,
.userData-content-bD,
.userData-content-mC,
.userData-other-mC,
.userData-other-aM{
    width: 100%;
    height: .7rem;
    font-size:.23rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(200,200,200);
}
.userData-content-nN span:first-of-type{
    margin-right: 81.5%;
}
.userData-content-nN span:last-of-type,
.userData-content-s span:last-of-type,
.userData-content-bD span:last-of-type,
.userData-content-mC span:last-of-type,
.userData-other-mC span:last-of-type,
.userData-other-aM span:last-of-type{
    width:.4rem;
    height:.7rem;
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}

/* 性别 */
.userData-content-s span:first-of-type{
    margin-right: 81.5%;
}
.userData-content-s span:last-of-type{
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}

/*  出生日期 */
.userData-content-bD span:first-of-type{
    margin-right: 73%;
}
.userData-content-bD span:last-of-type{
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}

/*  我的会员卡 */
.userData-content-mC{
    border:none;
}
.userData-content-mC span:first-of-type{
    margin-right: 68%;
}
.userData-content-mC span:last-of-type{
    background: url(../../static/img5/icon-code.png) no-repeat right center;
    background-size: 70%;
}

.userData-other{
    width:100%;
    padding:0 0 0 .2rem;
    border-bottom: 100vh solid rgb(248,248,248);
}

/*  修改密码 */
.userData-other-mC span:first-of-type{
    margin-right: 72.5%;
}
.userData-other-mC span:last-of-type{
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}

/*  收货地址管理 */
.userData-other-aM{
    border:none;
}
.userData-other-aM span:first-of-type{
    margin-right: 63.5%;
}
.userData-other-aM span:last-of-type{
    background: url(../../static/img5/icon-arrow.png) no-repeat right center;
    background-size: 60%;
}
</style>